<template>
	<view class="" style="width:100%;height: 100%;">
		<qiun-data-charts type="mix" :opts="mixOpts" :chartData="mixChartData" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//混合图
				mixChartData: {},
				mixOpts: {
					color: ["#00ABFF"],
					padding: [15, 15, 0, 15],
					legend: {},
					// enableScroll: true,
					xAxis: {
						disableGrid: true,
						rotateLabel: true,
						// itemCount: 3
					},
					dataLabel: false,
					yAxis: {
						disabled: false,
						disableGrid: false,
						splitNumber: 5,
						gridType: "dash",
						dashLength: 4,
						gridColor: "#CCCCCC",
						padding: 10,
						// showTitle: true,
						data: [{
								position: "left",
								min: 0,
								// max: 200,
								title: "数据(单位)",
								textAlign: "left"
							},
							{
								position: "right",
								min: 0,
								max: 100,
								title: "",
								textAlign: "left"
							}
						]
					},
					extra: {
						mix: {
							column: {
								width: 20,
							},
							// area: {
							// 	type: "curve",
							// 	opacity: 0.8,
							// 	addLine: true,
							// 	width: 2,
							// 	gradient: true,
							// }
						},
					}
				},
			}
		},
		mounted() {
			this.$api.directionStatistics().then(res => {
				// console.log(res,'流量流向统计');
				let resData = res.data.data
				let chartData = {
					categories: resData.map(el => el.name),
					series: [{
							name: "货运量",
							type: "column",
							data: resData.map(el => Number(el.count).toFixed(2)),
							format: 'addUnit',//数据格式化
						},
						{
							name: "货运量占比",
							index: 1,
							type: "area",
							style: "curve",
							data: resData.map(el => Number(el.proportion))
						},
						// {
						// 	name: "",
						// 	type: "line",
						// 	style: "curve",
						// 	color: "#1890ff",
						// 	disableLegend: true,
						// 	data: [70, 50, 85, 130, 64, 88]
						// },
					]
				}
				this.mixChartData = chartData
			})
		},
		methods: {

		},
	}
</script>

<style>

</style>
